<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-row layui-col-space10">
            {volist name='lives' id='live'}
            <div class="layui-col-md3">
                <div class="layui-card" style="padding-top: 56%;">
                    <div id="id_player_{$i}" style="width:calc(100% - 5px); height:calc(100% - 5px);position: absolute;left: 0;top: 0;"></div>
                    <label style="position: absolute;top: 5px;color: white">{$live.anchor.nick_name}({$live.anchor.id})</label>
                </div>
            </div>
            {/volist}
        </div>
        <div id="pager" style="margin-top: 20px;margin-left: 20px;"></div>
    </div>
</div>

<script src="/layuiadmin/layui/layui.js"></script>
<script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.3.js" charset="utf-8"></script>;
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'laypage'], function(){
        var laypage = layui.laypage;

        //执行一个laypage实例
        laypage.render({
            elem: 'pager'
            ,curr: {$page}
            ,count: {$count}
            ,limits: 12
            ,layout: ['count', 'prev', 'page', 'next', 'skip']
            ,jump: function(obj, first){
                if(!first){
                    window.location.href = '/admin/live/dashboard/?page='+obj.curr;
                }
            }
        });
    });
    {volist name='lives' id='live'}
        var player = new TcPlayer('id_player_{$i}', {
            "m3u8": "{$live.pull_url}", //请替换成实际可用的播放地址
            "autoplay" : true,      //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
            "poster" : "{$live.thumb}",
            'live' : 'true'
        });
    {/volist}
</script>
</body>
</html>
